﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UboxTemplate.ascx.cs" Inherits="UboxTemplate" %>

<style>
    /*html {overflow-y: scroll;}*/

#articleContent{
    word-break: break-all;
}
.ubox-content{
    cursor: default;
    width: 600px;

    /*height: 900px;*/
    margin: 0 auto;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}


@media screen and (max-width:979px) {
    .recommend-container {
        display:none;
    }
    .introduction-container {
        display:none;
    }

    .black-container {
        width:100%;  
    }

    .reader-container {
        width:100%;
        margin:0 auto;
        /*vertical-align:central;*/
    }
    .reader-top{
    width: 100%;
    margin:0px auto;
    margin: 15px auto 0 auto;
}
    .reader-rigth-container {
        display:none;
    }
    .reader-container {
        width:100%;
        margin:0 auto;
    }
}

@media screen and (max-width:649px) {
    
    .ubox-content{
   width:100%;
   margin:0 auto;
}
    .reader-container {
        margin:0 auto;
    }
    .reader-top{
        width:100%;
}
    .reader-rigth-container {
        display:none;
    }
    
    .reader-bottom {
        width:100%;
        margin:0 auto;
    }
    .reader-bottom-left {
        width:100%;
        margin:0 auto;
    }
    
    
}

.ubox-top{
    background-color: #f8f8f8;
    background-color: rgba(248, 248, 248, 0.9);
    border-radius: 6px 6px 0 0 ;
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
    border-bottom: 1px solid  rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 56px;
    padding: 9px 15px;
    margin: 0;
}
.btn-right{
    float: right;
    margin-left: 10px;
}
.ubox-middle{
    /*height: 500px;*/
    /*width:90%;*/
    margin-top:3px;
    /*margin: 0 auto;*/
    padding:15px 10px 20px 10px;
    background:#EEEEEE;
    border-radius: 6px 6px  ;
}
.article-top{
    padding-bottom: 30px;
    border-bottom:1px solid #DDD;
    padding-top:5px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
}
.article-title{
    text-align: center;
    
}
.article-author{
    /*float: left;*/ 
    margin-left: 20px;

}

    #linkAuthorPage {
        float:right;
    }
#imgAuthorPhoto{
    width: 20px;
    height: 20px;
    margin-right: -4px;
}
.article-date{
    float: right;
    margin-right: 20px;
}
.article-content{
    margin: 5px 10px 0 10px;
    
    padding-top:10px;
}
.article-content img{
    max-width: 540px;
     
}


    .ubox-cover {
        
        padding: 20px 0;
        /*margin: 0 auto;*/
        background: #fff;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.1);
        margin-bottom:15px;
        
    }

    .ubox-article-container {
        padding: 20px 10px 20px 10px;
        margin: 0 auto;
        min-height:600px;
        background: #fff;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.1);
    }
.ubox-cover > img{
    display: block; 
    margin: 0 auto;
}
.ubox-bottom{

}
.loveicon {
        color:rgba(0,0,0,0.2);
    }
.loveicon:hover {
            color:#ff0000;
}
.gobackpage {
}
.gobackpage:hover {
            color:#0099FF;
}

    .report-badacthor {
        float: right;
            color: #ccc;
            text-decoration: none;
            margin-top: 32px;
            padding-right:10px;
    }
            .report-badacthor:hover {
                color: #ff0000;
                /*color: #3399f3;*/
                /*color: #2e52f8;*/
                text-decoration: none;
            }

</style>


    <div class="ubox-content">
        <div class="ubox-top">
            <input type="hidden" id="ScrollTop">
            <input type="hidden" id="ScrollEnable" value="1">
            <input type="hidden" id="Introduction_page">
            <input type="hidden" id="click_id">
            <input type="hidden" id="P_cate">
            <input type="hidden" id="HiddenArcitleId">
            <input type="hidden" id="UserActionType">
            <input type="hidden" id="MessageId">
            <input type="hidden" id="HiddenMessageNowNum">
            <input type="hidden" id="HiddenMessageMaxNum">
            <input type="hidden" id="HiddenMessageHr">
            <input type="hidden" id="HiddenMessageMin">
            <input type="hidden" id="HiddenMessageSec">
            <button id="BtnClickPage" type="button" class="btn btn-default btn-left gobackpage" >
                <span><i class="glyphicon glyphicon-arrow-left "></i></span>
            </button>
            <button type="button" class="btn btn-danger btn-left btn-compare login-use" >
                <span id="P_id">加入比拼</span>
            </button>
            
            <button type="button" class="btn btn-right" style="background:#3B5998;color:#fff;" id="FBShare">
                <span>分享至Facebook</span>
            </button>
            <button id="BtnAddFavorite" type="button" class="btn btn-default btn-right loveicon" >
                <span><i class="glyphicon glyphicon-heart "></i></span>
            </button>
        </div>
        <div class="ubox-middle">
            <div class="ubox-cover">
                <div id="DivimgUboxCover" class="img-responsive">
                <img id="imgUboxCover"  src="" />
                </div>
            </div>
            <div class="ubox-article-container">
                <a href="#" id="report3" class="report-badacthor" title="檢舉"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;檢舉</a>
                <a href='#' id='report4' class='remove-badmessage-board' title='刪除'><i class='glyphicon glyphicon-remove'></i></a>
                <div class="article-top">
                    <div class="article-title">
                        <h3 id="articleTitle"></h3>
                    </div>
                    <div class="article-author">
                        <span id="linkAuthorPage">
                        </span>
                        

                    </div>

                    <div class="article-date">
                        <p id="articleDate"><%--日期時間塞這裡--%>
                        </p>
                    </div>
                </div>
                <div id="DivArticleImg" ></div>
                <div id="articleContent" class="article-content">
                    <%--HTML UBOX 塞這裡--%>
                    </div>
            </div>
        </div>
        <div class="ubox-bottom">

        </div>
        <style>
            .reader-warning-container{
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                display: none;
                z-index: 3000;
            }
            .reader-warning{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 100px;
                margin-left: -150px;
                margin-right: -750px;
                /*border: 1px solid green;*/
                background:#fff;
                
            }
            .jumb-btn {
                margin:15px 10px 5px 0px;
            }
            .deletequt {
                text-align:center;
                vertical-align:middle;
            }
        </style>
        <div id="remove-badmessage-board" class="reader-warning-container">   <%--刪除--%>
            <div class="reader-warning" style="width:300px;">
                <div class="jumbotron deletequt" style="margin:0 auto;">
                    <h4>確定要刪除嗎?</h4><br />
                <button id="BtnDeleteYes" class="btn btn-danger jumb-btn" type="button">yes</button>
                <button class="BtnNo btn btn-default jumb-btn" type="button">no</button>
                    </div>
            </div>
        </div>
        <div id="report-badmessage-board" class="reader-warning-container">   <%--檢舉--%>
            <div class="reader-warning">
                <div class="jumbotron">
                    <h4>為什麼要檢舉?</h4>
                <input id="TxtReport" class="form-control input-lg" type="text" placeholder="檢舉內容">
                    
               <button id="BtnReportYes" class="btn btn-danger jumb-btn" type="button">yes</button>
                <button class="BtnNo btn btn-default jumb-btn" type="button">no</button>
                    </div>
            </div>
        </div>
        
    </div>




<%--客製參考--%>
<link href="Content/UboxTamplate.css" rel="stylesheet" />
<script src="Scripts/UboxTamplate.js"></script>
<%--客製參考--%>

<script>
    //btn登入鍵click event. show登入畫面
    //$('#cmdToolBarLogin').click(function () {
    //    $('.login-container').fadeTo(500, 1).show();
    //});

    //點到登入表單 不要氣泡至login-container引發hideLoginContainer()
    $('.ubox-content').click(function (event) {
        event.stopPropagation();
    });

</script>